<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/8/31
  Time: 20:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function add(from) {
            if (from.cellphonenumber==""){
                aop1.innerHTML="手机号码不能为空";
            }
            if (from.password==""){
                aop2.innerHTML="密码不能为空";
            }
            if (from.password!=from.password1){
                aop3.innerHTML="2次输入的密码不一样";
            }
        }
    </script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

</head>
<body>
<h>${username}</h>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            首页
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">提交个人信息</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">我的
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">修改密码</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">我的订单</a></li>
        </ul>
    </li>
</ul>
<!--首页--->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <div>
            <div>
                <img src="/imgs/u=3889675942,1175940180&fm=26&gp=0.png" width="1400" height="500">
            </div>
            <div>
                客房列表
            </div>
            <div>
                <form >
                    <input type="text"  id="person">
                     <input  type="button" id="btn" value="搜索">
                </form>
            </div>
            <div  class="row clearfix">
                <div class="col-md-12 column" id="Inquire">
                   <table class="table table-hover table-striped"  data-toggle="table" id="table">
                   </table>
                </div>
            </div>
        </div>
    </div>
        <div class="tab-pane fade" id="ios">
        <form action="/personal/formation">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#collapseOne">
                            用户名字
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <input type="text" name="username">
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#collapseTwo">
                            我真实姓名
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <input type="text" name="realname">
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#collapseThree">
                            身份证号码
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">
                        <input type="text" name="identification">
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#collapseFive">
                            联系地址
                        </a>
                    </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse">
                    <div class="panel-body">
                        <input type="text" name="location">
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-success">提交</button>

        </form>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <div class="aop">
            <form name="from1" action="/login/change">
                请输入你注册的手机号码  <input type="text" width="800" name="cellphonenumber" onblur="add(from1)"><span id="aop1"></span><br>
                请输入你要修改的密码 <input type="password" width="800" name="password" onblur="add(from1)"><span id="aop2"></span><br>
                重新输入你要修改的密码<input type="password" width="800" name="password1" onblur="add(from1)"><span id="aop3"></span><br>
                <input type="submit" value="提交">
            </form>
            <div>${uqdate}</div>
        </div>
    </div>
    <div class="tab-pane fade" id="ejb">
       <form name="from1" action="/status/queryindividuals">
           请输入你的预留的手机号码<input type="text" name="phone">
           <input type="submit" value="搜索我的订单">
       </form>
        <div  class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <td>预定的房间号</td>
                        <td>预定的开始时间</td>
                        <td>预定结束的时间</td>
                        <td>客户留言</td>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="book"  items="${listreserve}">
                        <tr>
                            <td>${book.reservecommodity}</td>
                            <td>${book.Startingtime}</td>
                            <td>${book.timeofdepartrueDate}</td>
                            <td>${book.messags}</td>
                            <td><button type="button" onclick="checkout(${book.reservecommodity})">退房</button></td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>

        </div>
        <div>
            <form>
                请输入你的用户名<input type="text" id="username"><br>
                <input type="button" value="搜索" id="btn2" >
            </form>
            <div  class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table table-hover table-striped" id="dataTable2">
                    </table>
                </div>
            </div>
        </div>
  </div>
</div>
<script>
    function checkout(reservecommodity) {
    $.ajax({
        type:'GET',
        url: '/status/checkout',
        date:{
            reservecommodity:reservecommodity
        },
        dataType:'json',
        success:function (data) {
          if (data!=null){
              alert("退房成功");
          }
        },
        error:function (data) {

        }
    })
    }
</script>
<script type="text/javascript">
    $(function () {
        // 初始化表格,动态从服务器加载数据]
        init();
        $('#btn').click(function () {
            init();
        });
    })

    function init(){
        $('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
            url: "/zoom/getPage",
            method: "GET",
            pagination: false,   //启动分页
            striped: true,    //设置为 true 会有隔行变色效果
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pageSize: 20,//初始页记录数
            sortable: true,    //排序
            pageList: [10,20], //记录数可选列表
            smartDisplay: false,    //程序自动判断显示分页信息
            queryParams: function(params) {
                params.person = $("#person").val();
                console.log("params=" + JSON.stringify(params));
                return params;
            },
            columns: [{
                    title: 'ID',
                    field: 'commodityid',
                    align: 'center',
                    halign: 'center',
                },
                {
                    field: 'house',
                    title: 'house',
                    align: 'center',
                    sortable:true    //排序
                }, {
                    field: 'merchandise',
                    title: 'merchandise',
                    align: 'center'
                }, {
                    field: 'merchendisetype',
                    title: 'merchendisetype',
                    align: 'center'
                }, {
                    field: 'person',
                    title: 'person',
                    align: 'center'
                }, {
                    field: 'price',
                    title: 'price',
                    align: 'center'
                }, {
                    title: "操作",
                    align: 'center',
                    formatter: function (index, row, x) {
                        var html ='<button type="button"  onclick="a1( '+   row.commodityid +')">预定</button>';//就是这个预定功能

                        return html;
                    }
                },{
                title: "入住",
                    align: 'renter',
                    formatter:function (index, row, x) {
                        var html ='<button type="button"  onclick="a2( '+  row.commodityid +')">入住</button>';
                        return html;
                    }
                }],

        });
    }
    function a1(id) {
        window.location.href= "/status/selectById?commodityid=" + id;
    }
    function a2(id) {
     window.location.href="/Pay/payid?commodityid="+id+"&username="+${username};
    }
</script>
<script type="text/javascript">
    $(function () {
        // 初始化表格,动态从服务器加载数据]
        init2();
        $('#btn2').click(function () {
            init2();
        });
    })
    function init2() {
        $('#dataTable2').bootstrapTable('destroy');
        $('#dataTable2').bootstrapTable({
            url: "/orderw/checki",
            method: "GET",
            pagination: false,   //启动分页
            striped: true,    //设置为 true 会有隔行变色效果
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pageSize: 20,//初始页记录数
            sortable: true,    //排序
            pageList: [10,20], //记录数可选列表
            smartDisplay: false,    //程序自动判断显示分页信息
            queryParams: function(params) {
                params.username=$("username").val();
                return params;
            },
            columns:[
                {
                     title:'订单号',
                     field :'orderid',
                     align: 'center'
                },
                {
                    title: '房间号',
                    field: 'Ordersfogoods',
                    align: 'center'
                },
                {
                    title: '价格',
                    field: 'Orderprice',
                    align: 'center'
                },
                {
                    title: '用户名',
                    field: 'username',
                    align: 'center'
                }
            ],
        })
    }
</script>
</body>
</html>
